<template>
  <div class="container">
    <!-- 这是注释 -->
    <h2>常用表单项和v-model练习</h2>
  
    姓名：<input type="text" v-model="uname" /><br />

    性别：
    <input type="radio" name="sex" value="男" v-model="xingbie" />男生
    <input type="radio" name="sex" value="女" v-model="xingbie" />女生<br />

    爱好：
    <input type="checkbox" name="hobby" value="chifan" v-model="hobby" />吃饭
    <input type="checkbox" name="hobby" value="shuijiao" v-model="hobby" />睡觉
    <input type="checkbox" name="hobby" value="dadoudou" v-model="hobby" />打豆豆<br />

    籍贯：
    <select v-model="address">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="tj">天津</option></select
    ><br />

    状态：<input type="checkbox" v-model="state" />
  </div>
</template>

<script>
export default {
  // 这里放vue相关代码
  data () {
    return {
      uname: 'zs',
      xingbie: '女',
      hobby: ['chifan', 'dadoudou'],
      address: 'sh',
      state: true // 单个复选框，使用布尔值控制是否选中
    }
  }
}
</script>

<style>
h2 {
  color: red;
}
</style>